<template lang="pug">
  .main
    .function-box(v-show='boxDisplay')
      .drag 功能标题
        .close(@click="boxDisplay = false")


</template>

<script>


export default {
  name: "test",
  data() {
    return {
      boxDisplay:true,
    }

  },
  created() {

  },
  mounted() {
    this.init()
  },
  watch: {},
  methods: {
    init() {
      // 获取元素
      let box = document.querySelector('.function-box');
      let drag = document.querySelector('.drag');

      drag.addEventListener('mousedown', (e) => {
        // 鼠标按下对话框顶部时，获取鼠标到对话框的距离
        let x = e.pageX - box.offsetLeft;
        let y = e.pageY - box.offsetTop;
        // 鼠标按下并移动时，实时更新对话框的位置
        document.addEventListener('mousemove', move);

        function move(e) {
          box.style.left = e.pageX - x + 'px';
          box.style.top = e.pageY - y + 'px';
        }

        // 鼠标松开时，移除拖拽的动作
        document.addEventListener('mouseup', () => {
          document.removeEventListener('mousemove', move);
        });
      });
    },

  },
  destroyed() {

  },

}
</script>

<style lang="stylus" scoped>

.main
  user-select: none;
.function-box {
  position: fixed;
  top: 110px;
  left: 280px;
  width: 400px;
  height: 200px;
  background-color: #2c3e50cc;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, .3);
  color white
  border-radius 8px
}

.drag {
  box-sizing: border-box
  padding-left 20px
  color white
  position: relative;
  width: 100%;
  height: 30px;
  line-height 30px
  font-size 20px
  background-color: #323233;
}

.drag:hover {
  cursor: move;
  //border:1px solid #aef;
  box-shadow 0px 0px 2px #aef
}

.close {
  position: absolute;
  top: 3px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-color: red;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .7) inset;
}

.close:hover {
  background-color: yellow;
  cursor: pointer;
}

</style>
